<template>
  <main class="details w-e-text shadow">
    <h1 class="title">{{ article.title }}</h1>
    <a-tag color="#42A5F5" class="type"> {{ article.type }}</a-tag>
    <a-alert
      :message="article.synopsis"
      type="info"
      class="synopsis"
      show-icon
      v-if="article.synopsis"
    >
      <template #icon><CommentOutlined /></template>
    </a-alert>

    <main v-html="article.content"></main>
  </main>
</template>

<script>
import { ref, watchEffect } from "vue";
import { Alert } from "ant-design-vue";
import { CommentOutlined } from "@ant-design/icons-vue";
import { useLinkedRouteParam } from "@u/route";
import http from "@u/http";
import { useInfoNotice } from "@u/notice";
import { useWindowScrollTo } from "@u/scroll";
import "wangeditor"; // 目的是引入 wang的样式

export default {
  components: {
    CommentOutlined,
    AAlert: Alert,
  },
  setup () {
    // const id = useLinkedRouteParam("id");
    // const article = ref({});
    // useWindowScrollTo({ top: 0 }, "auto");
    // watchEffect(
    //   async () => {
    //     try {
    //       const res = await http.get(`/articles/${id.value}`);
    //       article.value = res.data;
    //     } catch (error) {
    //       useInfoNotice({
    //         message: "文章获取失败",
    //         description: error.data || error.reason || "未知错误",
    //       });
    //     }
    //   },
    //   {
    //     flush: "post",
    //   }
    // );

    const id = useLinkedRouteParam("id");
    const article = ref({}); // 之所以用ref不用reactive的原因在于 用后者需要为每个变量赋值
    useWindowScrollTo({ top: 0 }, "auto");
    watchEffect(
      async () => {
        try {
          const res = await http.get(`/articles/${id.value}`);
          article.value = res.data;
        } catch (error) {
          useInfoNotice({
            message: "文章获取失败",
            description: error.data || error.reason || "未知错误",
          });
        }
      },
      { flush: "post" }
    );
    return {
      article,
    };
  },
};
</script>

<style scoped>
.details {
  margin: 20px;
  padding: 20px;
  background-color: #ffffff;
  border: 1.5px solid #b0bec5;
  border-radius: 4px;
  position: relative;
  min-height: 100vh;
}

.title {
  text-align: center;
}

.type {
  position: absolute;
  top: 10px;
  right: 10px;
}
.synopsis {
  margin-bottom: 20px;
}
</style>